{% extends "base.html" %}
{% block script %}
    {{ block.super }}

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>

    <script type="text/javascript">

        // Load the Visualization API and the piechart package.
        google.load('visualization', '1.0', {'packages':['corechart']});

        // Set a callback to run when the Google Visualization API is loaded.
        google.setOnLoadCallback(drawChart);

        // Callback that creates and populates a data table,
        // instantiates the pie chart, passes in the data and
        // draws it.
        function drawChart() {
            <!-- Daily response chart -->
            var data_resp = new google.visualization.DataTable();
            data_resp.addColumn('string', 'Date');
            data_resp.addColumn('number', 'Number of responses');
            data_resp.addRows({{ respondents_data|safe }});
            // Create the data table.

            // Set chart options
            var options_resp = {
                'title':"Daily Responses",
                'width':600,
                'height':500
            };

            var chart_resp = new google.visualization.LineChart(document.getElementById('chart_div_resp'));
            chart_resp.draw(data_resp, options_resp);


            <!-- Chart for question -->
        {% for question, raw_data in zipped %}
            {% if question.type == 'multiplechoice' or question.type == 'checkbox' or question.type == 'scale' %}
                // Create the data table.
                var data{{ question.id_in_survey }} = new google.visualization.DataTable();
                data{{ question.id_in_survey }}.addColumn('string', 'Choice');
                data{{ question.id_in_survey }}.addColumn('number', 'Number of responses');
                data{{ question.id_in_survey }}.addRows({{ raw_data|safe }});
                // Create the data table.

                // Set chart options
                var options{{ question.id_in_survey }} = {
                    'title':"{{ question.title|safe }}",
                    'width':600,
                    'height':500,
                    {% if question.type == 'checkbox' %}
                        'is3D':true,
                    {% endif %}
                    {% if question.type == 'scale' %}
                        hAxis:{title:'Scale value'},
                    {% endif %}
                };

                // Instantiate and draw our chart, passing in some options.
                {% if question.type == 'multiplechoice' %}
                    var chart{{ question.id_in_survey }} = new google.visualization.BarChart(document.getElementById('chart_div{{ question.id_in_survey }}'));
                {% endif %}
                {% if question.type == 'checkbox'%}
                    var chart{{ question.id_in_survey }} = new google.visualization.PieChart(document.getElementById('chart_div{{ question.id_in_survey }}'));
                {% endif %}
                {% if question.type == 'scale' %}
                    var chart{{ question.id_in_survey }} = new google.visualization.ColumnChart(document.getElementById('chart_div{{ question.id_in_survey }}'));
                {% endif %}

                chart{{ question.id_in_survey }}.draw(data{{ question.id_in_survey }}, options{{ question.id_in_survey }});

            {% endif %}
        {% endfor %}
        }
    </script>

    {# for geo chart #}
    <script type='text/javascript'>
        google.load('visualization', '1', {'packages':['geochart']});
        google.setOnLoadCallback(drawRegionsMap);

        function drawRegionsMap() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Country');
            data.addColumn('number', 'Number of respondents')

            data.addRows({{ geo_data|safe }});

            var options = {
                'colorAxis':{colors:['green', 'blue']},
                'width':700,
                'height':500
            };

            var chart = new google.visualization.GeoChart(document.getElementById('chart_div_geo'));
            chart.draw(data, options);
        }
        ;
    </script>


{% endblock %}


{% block content %}

    <style type="text/css">
        body {
            text-align: left;
        }
    </style>
    <div style="margin-left: 100px;margin-right: 100px;">
        <div class="container">
            <div class="row">
                <div class="span3 tooltip-demo bs-docs-tooltip-examples">
                    {% load static %}
                    <img src="{% static "img/analyseshow.png" %}" alt="Analyse Survey">
                    <a  href="#" rel="tooltip" data-placement="right" title="How to view the analysis data?
Question tap gives the detail analysis of each questions. You can click the question number to expand the view, and see graphic charts where applicable.
Time taken tap shows the average, maximum and minimum time taken by respondents to answer survey.
Daily responses indicates the time distribution of response statistics.
Demographic Statistics displays the geographic distribution of survey takers.
"><i class="icon-question-sign" style="margin-top: 5px;"></i></a>
                </div>
                <div class="span8">
                    <h1 style="text-align: center;">{{ survey.title }}</h1>
                    <h1 style="color:#a9a9a9;text-align: center;">{{ responses|length }} Responses</h1>
                    <p style="color: #d3d3d3;text-align: center;">Deadline: {{ survey.deadline }}</p>
                </div>

            </div>
        </div>



        <div class="tabbable"> <!-- Only required for left/right tabs -->
            <ul class="nav nav-tabs" >
                <li class="active"><a href="#tabQuestion" data-toggle="tab" style="background-color:#f5f5f5;">Question</a></li>
                <li><a href="#tabTime" data-toggle="tab" style="background-color: #f5f5f5;">Time Taken</a></li>
                <li><a href="#tabDaily" data-toggle="tab" style="background-color:#f5f5f5;">Daily Responses</a></li>
                <li><a href="#tabGeoMap" data-toggle="tab" style="background-color:#f5f5f5;">Demography Statistics</a></li>
            </ul>

            <div class="tab-content">
                <div class="tab-pane active" id="tabQuestion">




           <div class="accordion" id="accordion">
              {% for question, raw_data, no_skipped in zipped %}




                <div class="accordion-group">

                    <div class="accordion-heading">
                    <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion"
                       href="#collapse{{ question.id_in_survey }}">
                        Question {{ question.id_in_survey }}
                    </a>
                    </div>

                    {% if forloop.first %}
                        <div id="collapse{{ question.id_in_survey }}" class="accordion-body collapse in">
                    {% else %}
                        <div id="collapse{{ question.id_in_survey }}" class="accordion-body collapse">
                    {% endif %}

                        <div class="accordion-inner">

                        <h3><b>{{ question.title }}</b></h3>

                        {% if question.description %}
                            {{ question.description }}
                        {% endif %}

                    {% if not question.is_required %}
                        <p>This is question is optional, <b>{{ no_skipped }}</b> respondents have not answered.</p>
                    {% endif %}

                        <div id="chart_div{{ question.id_in_survey }}"></div>
                        {# raw data #}
                        <strong>Raw responses data</strong>

                    {% if question.type == "multiplechoice" or question.type == "checkbox" %}
                        {% for label, count in raw_data %}
                            <p>{{ label }} : {{ count }}</p>
                        {% endfor %}
                    {% endif %}

                    {% if question.type == 'text' or question.type == 'paragraph' %}
                        {% for value in raw_data %}
                            {% if value %}
                                <p>{{ value }}</p>
                            {% endif %}
                        {% endfor %}
                    {% endif %}

                    {% if question.type == 'scale' %}
                        {% for value in raw_data %}
                            <p>{{ value }}</p>
                        {% endfor %}
                    {% endif %}

                    {% if question.type == 'date' %}
                        {% for value in raw_data %}
                            <p>{{ value }}</p>
                        {% endfor %}
                    {% endif %}

                    {% if question.type == 'numeric' %}
                        {% for value in raw_data.data %}
                            <p>{{ value }}</p>
                        {% endfor %}

                        <p>Min value = {{ raw_data.min_value }}</p>
                        <p>Max value = {{ raw_data.max_value }}</p>
                        <p>Average = {{ raw_data.avg }}</p>
                    {% endif %}

                    </div>
                    </div>

                </div>
            {% endfor %}
        </div>


        </div>
                    <div class="tab-pane" id="tabDaily">
                        <h3>Daily Responses Statistics</h3>
                        <div id="chart_div_resp"></div>
                    </div>

                    <div class="tab-pane" id="tabTime">
                        <h3 style="color: #696969;">Respondents take an average time of <big style="color: #000000;">{{ time_data.avg }} seconds</big> to answer this survey.</h3>
                        <h3 style="color: #696969;">Fastest answers were submitted within <big style="color: #000000;">{{ time_data.min }} seconds</big>.</h3>
                        <h3 style="color: #696969;">The longest took <big style="color: #000000;">{{ time_data.max }} seconds</big> before clicking the submit button.</h3>
                        <h3 style="color: #888888;">Statistics Insight</h3>

                        {% for time in time_data.seconds %}
                            <p style="color: #888888;">{{ time }} seconds</p>
                        {% endfor %}


                    </div>


                    <div class="tab-pane" id="tabGeoMap">
                        <h3>World Geographic Distribution of Respondents</h3>
                        <div id="chart_div_geo"></div>
                    </div>

                    </div>
                </div>


            </div>
    </div>



{% endblock %}